import React, { useEffect } from 'react'
import ellipsis from '../../../assets/images/ellipsis.png'
import play from '../../../assets/Icon-font/play1.png'
import Scroll from '../../../baseUI/scroll'
import { useHistory } from 'react-router-dom';
import './Album.css'


const Album = (props) =>{
    // console.log(props,'album');
    const { personalized=[],name,min,max,setAlbumId,AlbumId} = props;
    const history = useHistory()
    const gotoDetail = (id) => {
        // console.log(history,'history')
        history.push(`/album/${id}`)
    }
    let personalizedFilter = personalized.filter((item,index) =>{
        return index<=max&&index>=min
    });
    return (
        <div className="main">
            <div className="title"> 
                <div className="album_name">{name}</div>
                <div className="ellipsis">
                    <img src={ellipsis} alt=""  className='ellipsis_pic_album'/>
                </div>
            </div>
            
            

        <div className="song_list_cover">          
            <div className="song_list" >
                {
                personalizedFilter.map((item,index)=>{
                    if(index>max&&index<min){
                        console.log(index)
                        return ;
                    }
                    else
                    return(
                        <div className="list_body" key={index} >
                            <div className="header" onClick={() => setAlbumId(item.id), ()=> gotoDetail(item.id)}>
                                <div className="list_pic">
                                    <img src={item.picUrl} alt="" className='cover_pic'/>
                                    <div className="play_num">
                                        <div className="icon">
                                            <img src={play} alt=""  className='play_pic'/>
                                            <div className='people_num'>{(item.playCount/10000).toFixed(2)}万人</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="list_name">
                                {item.name}
                            </div>
                        </div>
                    )
                })
                }

            </div>
        </div>     
            
            </div>
        
    )
}

export default Album